<template>
<div class="search">
  <div class="header">
    <div class="search-input">
      <el-input v-model="queryParams.keyword"
                placeholder="输入关键字搜索"
                clearable
                @keyup.enter.native="handleSearch"
      />
      <el-button class="btn" type="primary" @click="handleSearch">搜索</el-button>
    </div>
  </div>
  <div class="content">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane :label="'综合'+(videoTotal?videoTotal+1:0)" name="all">
          <div class="up-box" v-if="userList.length !== 0">
            <div class="up-info" v-for="item in mostSimilarUser" :key="item.userId">
              <div class="up-info-left">
                <el-avatar @click="toSpace(item.userId)" :src="item.userAvatar" :size="70"></el-avatar>
              </div>
              <div class="up-info-right">
                <div class="top">
                  <div class="nickname" @click="toSpace(item.userId)">{{ item.nickname }}</div>
<!--                  <el-button type="primary" v-if="item.hasCare">已关注</el-button>-->
<!--                  <el-button type="primary" v-else>+关注</el-button>-->
                  <el-button type="primary" style="width: 100px" v-if="item.hasCare" @click="cancelCare(item)">已关注</el-button>
                  <el-button type="primary" style="width: 100px" v-else @click="careIt(item)">+关注</el-button>
                </div>
                <div class="bottom">
                  粉丝：&nbsp;{{ item.fansCount }}·视频：{{ item.videoCount }}
                </div>
              </div>
            </div>
            <template v-if="mostSimilarUserVideo.length !== 0">
              <div class="up-video">
                  <el-row style="">
                    <el-col :span="4" v-for="item in mostSimilarUserVideo" :key="item.videoId">
                    <div class="item-box" @click="toDetail(item.videoId)">
                      <el-image :src="item.videoCover"  fit="cover" class="video-cover"></el-image>
                      <div class="video-title" @click="toDetail(item.videoId)">
                        {{ item.videoTitle }}
                      </div>
                      <div class="datetime">
                        {{ item.videoPublishTime }}
                      </div>
                    </div>
                  </el-col>
                  </el-row>
              </div>
            </template>
            <div class="no-video">TA好像没发布过视频哦</div>



              <el-divider>
                <span class="tip" v-if="mostSimilarUserVideo.length !== 0">
                查看TA的所有稿件 >
                </span>
              </el-divider>

          </div>
          <div class="video-box">
            <FiveColVideoList :has-time="true" :height="143" :is-save="false" :data-list="videoList"></FiveColVideoList>
          </div>
          <el-empty v-if="userList.length === 0 && videoList.length === 0" description="暂无数据" />
        </el-tab-pane>
        <el-tab-pane :label="'视频'+ videoTotal" name="video">
          <div class="video-box">
            <FiveColVideoList :has-time="true" :height="143" :is-save="false" :data-list="videoList"></FiveColVideoList>
          </div>
          <el-empty v-if="videoList.length === 0" description="暂无数据" />
        </el-tab-pane>
        <el-tab-pane :label="'用户'+ userTotal" name="user">
          <el-row>
            <el-col :span="12" v-for="item in userList" :key="item.userId">
              <div class="user-box">
                <div class="user-box-left">
                  <el-avatar @click="toSpace(item.userId)" :src="item.userAvatar" :size="86"></el-avatar>
                </div>
                <div class="user-box-right">
                  <div class="nickname" @click="toSpace(item.userId)">{{ item.nickname }}</div>
                  <div class="introduction">{{ item.personalSignature }}</div>
                  <div class="care_status">
                    <el-button type="primary" style="width: 100px" v-if="item.hasCare" @click="cancelCare(item)">已关注</el-button>
                    <el-button type="primary" style="width: 100px" v-else @click="careIt(item)">+关注</el-button>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-empty v-if="userList.length === 0" description="暂无数据" />
        </el-tab-pane>
      </el-tabs>
  </div>
</div>
</template>
<script setup>
import {onMounted, onUnmounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import FiveColVideoList from "@/components/FiveColVideoList.vue";
import {careUP, getSubmitVideo, noCare, searchVideo} from "@/api/api.js";
import emitter from "@/utils/emitter.js";
import {useUserStore} from "@/stores/userInfoStore.js";
import {ElMessage} from "element-plus";
const route = useRoute();
onMounted(async ()=>{
  setTimeout(()=>{
    console.log("触发showInput事件")
    emitter.emit("showInput",false)
    console.log("顶部搜索消失")
  },1)
  console.log(route.query.keyword);
  queryParams.keyword = route.query.keyword;
  await handleSearch();
})

/* 搜索相关 */
const queryParams = reactive({
  keyword: "",
  page: 1,
  pageSize: 20,
  userId:localStorage.getItem("userId")
});
// 用户相关数据
const userTotal = ref(0);
const userList = ref([]);
const userPage = ref(1);
const userPageSize = ref(10);
// 视频相关数据
const videoTotal = ref(0);
const videoList = ref([]);
const videoPage = ref(1);
const videoPageSize = ref(10);
// 第一个用户
const mostSimilarUser = ref([])
const mostSimilarUserVideo = ref([])


const handleSearch = async () => {
 try{
   // queryParams.userId = localStorage.getItem("userId");
   // route.query.keyword = queryParams.keyword
   console.log(route.query.keyword)
   const res = await searchVideo(queryParams);
   console.log(res)
   videoList.value = res.data.videoList.records;
   userList.value = res.data.userList.records;
   videoTotal.value = res.data.videoList.total;
   userTotal.value = res.data.userList.total;
   mostSimilarUser.value = []
   mostSimilarUser.value.push(userList.value[0])
   if(userList.value.length !== 0){
     const {data} = await getSubmitVideo(mostSimilarUser.value[0].userId,{page:1,pageSize:5})
     console.log(data)
     mostSimilarUserVideo.value = data.records
   }

 }catch (e) {
   ElMessage.error("错误"+e)
   console.log(e)
 }
}


/* 关注相关 */
// 关注表单
const careForm = reactive({
  fansId:0,
  upId:0
})

/**
 * 关注用户
 * @param item
 * @returns {Promise<void>}
 */
const careIt = async (item) => {
  careForm.fansId = localStorage.getItem("userId");
  careForm.upId = item.userId
  const res = await careUP(careForm);
  if(res.code === 200){
    item.hasCare = 1
    ElMessage.success("关注成功")
  }
}

/**
 * 取消关注
 * @param item
 * @returns {Promise<void>}
 */
const cancelCare = async (item) => {
  careForm.fansId = localStorage.getItem("userId");
  careForm.upId = item.userId
  const res = await noCare(careForm)
  console.log(res)
  if(res.code === 200){
    item.hasCare = 0;
    ElMessage.success("取消关注")
  }
}

onUnmounted(()=>{
  emitter.emit("showInput",true)
})
const keywords = ref("");



/* 导航栏点击事件 */
const activeName = ref('all')

const handleClick = (tab, event) => {
  console.log(tab, event)
  console.log(tab.props.name)
}

// const videoList = ref([]);

const router = useRouter()
const toSpace = (id) => {
  // router.push({
  //   name:'home',
  //   params:{
  //     id
  //   }
  // })
  window.open("/space/home/"+id,"_blank")
}

const toDetail = (videoId) => {
  // router.push({
  //   name:'video',
  //   query:{
  //     videoId
  //   }
  // })
  window.open("/video?videoId="+id,"_blank")
}


</script>
<style lang="scss" scoped>
//.demo-tabs > .el-tabs__content {
//  padding: 32px;
//  color: #6b778c;
//  font-size: 52px;
//  font-weight: 600;
//}

.search{
  width: 100%;
  padding: 0 3% ;
  //margin: 0 auto;
  .header{
    display: flex;
    height: 100px;
    //background-color: red;
    justify-content: center;
    align-items: center;
    .search-input{
      display: flex;
      width: 40%;
      height: 45%;
      .btn{
        height: 100%;
        width: 20%;
      }
    }
  }
  .content{
    .up-box{
      .no-video{
        color:var(--gray-font-color--);
        font-size:13px;
        text-align: center;
      }
      .up-info{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .up-info-left{
          margin-right: 20px;
          cursor: pointer;
        }
        .up-info-right{
          .top{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-bottom: 10px;
            .nickname{
              cursor: pointer;
              font-size: 20px;
              font-weight: bold;
              margin-right: 20px;
            }
            .nickname:hover{
              color:var(--subject-color--)
            }
          }
          .bottom{
            font-size: 14px;
            color: var(--el-text-color-secondary);
          }
        }
      }
      .up-video{
        margin: 10px 0;
        width: 100%;
        height: 160px;
        //background-color: #2ae6ff;
        .item-box{
          cursor: pointer;
          height: 140px;
          //background-color: #ff2a2a;
          margin: 0 10px;
          .video-cover{
            width: 100%;
            height: 100px;
          }
          .video-title{
            height: 40px;
            width: 100%;
            font-size: 14px;
            //overflow: hidden;

            //color: var(--el-text-color-secondary);
          }
          .video-title:hover{
            color:var(--subject-color--)
          }
          .datetime{
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            color: var(--el-text-color-secondary);
          }
          .datetime:hover{
            color:var(--subject-color--)
          }
        }
      }
      .tip{
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: var(--subject-color--);
      }
    }
    .video-box{
      width: 100%;
      margin: 10px 0;
    }
    .user-box{
      display: flex;
      .user-box-left{
        width: 86px;
        height: 86px;
        margin:0 20px 20px 0;
        cursor: pointer;
      }
      .user-box-right{
        .nickname{
          cursor: pointer;
          color: black;
          font-weight: bold;
          font-size: 20px;
          height: 30px;
          line-height: 30px;
        }
        .introduction{
          color:var(--gray-font-color--);
          height:25px;
          font-size: 13px;
        }
      }
    }
  }
}
</style>